<template>
  <div class="home-search mt-container m-0-auto d-flex ai-center">
    <div class="mr-100 pr-50">
      <a class="w-100" style="display:block;" href="#"><img style="width:126px" src="@/assets/logo.png" alt=""></a>
    </div>
    <div class="flex-1 search">
      <input class="fs-14 text-ftcolor-1"  type="search" value="搜索商家或地点">
      <button type="button"><i class="el-icon-search fs-16 text-white "></i></button>
      <div class="pt-5 pl-5 fs-12">
        <a href="#" class="px-5 text-ftcolor-1">欢乐水上魔方乐园</a>
        <a href="#" class="px-5 text-ftcolor-1">古北水镇</a>
        <a href="#" class="px-5 text-ftcolor-1">八达岭长城</a>
      </div>
      <div class="search-content pt-5 px-16">
        <div class='search-hot'>
          <p class="fw-b text-ftcolor-1 fs-12">热门搜索</p>
          <div class="pt-5 fs-12" style="margin-left:-5px">
            <a href="#" class="px-5 text-ftcolor-1">欢乐水上魔方乐园</a>
            <a href="#" class="px-5 text-ftcolor-1">古北水镇</a>
            <a href="#" class="px-5 text-ftcolor-1">八达岭长城</a>
          </div>
        </div>
        <div class="search-list">
          <a href="#">1111</a>
          <a href="#">1111</a>
          <a href="#">1111</a>
          <a href="#">1111</a>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {

}
</script>

<style lang="scss" scoped>
@import '../../../assets/css/_varibles';
  .home-search {
    input {
      width: 50%;
      height:40px;
      border-radius: 5px 0 0 5px;
      border: 1px solid map-get($colors, 'primary');
      text-indent: 1rem;
    }
    button {
      width: 80px;
      height: 40px;
      background-color:map-get($colors, 'primary');
      border-radius: 0 5px 5px 0;
      border: 1px solid map-get($colors, 'primary')
    }
    .search {
      position: relative;
      .search-content {
        width: 50%;
        background-color: green;
        box-sizing: border-box;
        border-radius: 0 0 5px 5px;
        position: absolute;
        left: 0;
        top: 40px;
        display: none;
        .search-list {
          a {
            display: block;
            width: 100%;
            color: map-get($colors, 'ftcolor-3');
            font-size: 12px;
            line-height: 20px;
          }
        }
      }
    }
  }
</style>
